window.addEventListener('load', function() {
    const tab = document.querySelector('.nav-l ul>li:nth-child(2)')
    const small = document.querySelector('.small')
    const big = document.querySelectorAll('.big')
    const navico = document.querySelector('.nav-ico')
    const lis=document.querySelectorAll('.small>li')
    console.log(lis);
    tab.addEventListener('mousemove', function() {
        small.style.display = 'block'
        navico.innerHTML = ''
    })
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseover', function() {
            // 添加自定义属性
            lis[i].setAttribute('index', i)
            // 获取自定义属性
            const index = lis[i].getAttribute('index')
            for (let i = 0; i < big.length; i++) {
                big[i].style.display = 'none'
            }
                big[index].style.display = 'block'
        })
    }
    tab.addEventListener('mouseout', function() {
        small.style.display = 'none'
        for (let i = 0; i < lis.length; i++) {
            big[i].style.display='none'  
        }
        navico.innerHTML = ''
    })
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].addEventListener('mouseout', function() {
    //         for (let i = 0; i < lis.length; i++) {
    //             big[i].style.display='none'  
    //         }
    //         navico.innerHTML = ''
    //     })
    // }
})